<template>
	<BasicDrawer v-bind="$attrs" @register="registerDrawer" title="充电预警详情" width="1040px">
		<div class="content">
			<h1>{{ rowDate.warnId_dictText }} <a-tag color="#f5222d">{{ rowDate.level_dictText }}风险</a-tag></h1>
			<!-- {{ rowDate. }} -->
			<a-descriptions title="基础信息" layout="vertical" :column="4">
				<a-descriptions-item label="充电站编码">{{ rowDate.warnStation }} </a-descriptions-item>
				<a-descriptions-item label="充电站名称">{{ rowDate.warnStation_dictText }} </a-descriptions-item>
				<a-descriptions-item label="所属城市">{{ areaArray }}</a-descriptions-item>
				<a-descriptions-item label="所属运营商" :span="2">
					{{ rowDate.operatorid_dictText }}
				</a-descriptions-item>
			</a-descriptions>
			<div class="main">
				<div class="mainleft">
					<img src="/@/assets/images/station/u336.png" alt="">
					<div class="imgr">
						<p> {{ rowDate.warnStakeId }}</p>
						<p><span>1#桩?</span> <a-tag color="#2db7f5">直流?</a-tag></p>
						<p><img src="/@/assets/images/station/u348.png" alt="">额定功率 <span>?kW</span></p>
						<p><img src="/@/assets/images/station/u342.png" alt="">输出电压 <span>DC?~?V</span></p>
						<p><img src="/@/assets/images/station/u345.png" alt="">输出电流 <span>0~?A</span></p>
					</div>
				</div>
				<div class="mainright">
					<div class="mainrightonse">
						<a-space :size="5" align="center"> <span class="badge" style="background:#1890ff ;"></span>
							<span>充电机输出电流（A）</span>
						</a-space>
						<p>59.4??</p>
					</div>
					<div class="mainrightonse">
						<a-space align="center"> <span class="badge" style="background: #31ce2f;"> </span>
							充电机输出电流（A）</a-space>
						<p>59.4??</p>
					</div>
					<div class="mainrightonse">
						<a-space align="center"> <span class="badge" style="background:#30e8bb ;"></span>
							充电机输出电流（A）</a-space>
						<p>59.4??</p>
					</div>

				</div>
			</div>
			<!-- <a-descriptions title="充电过程曲线" layout="vertical"> -->
			<SingleLine :chartData="barDataSource" height="50vh" :option="{ title: { text: '充电过程曲线?', left: 'left' } }">
			</SingleLine>
			<!-- </a-descriptions> -->
		</div>

	</BasicDrawer>

</template>
<script lang="ts" setup>
import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
import SingleLine from '/@/components/chart/SingleLine.vue';
import { getData } from '/@/views/report/chartdemo/chartdemo.data.ts';
const { barDataSource, barMultiData, pieData, barLineData, radarData } = getData;
/**
 * 数据
 */
const rowDate = ref({});
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
	console.log('BasicDrawer数据数据数据data', data);
	rowDate.value = data;
});
</script>
<style lang="less" scoped>
.content {
	box-sizing: border-box;
	padding: 0 20px;

	.main {
		display: flex;

		.mainleft {
			display: flex;
			align-items: center;

			img {
				width: 55px;
				height: 190px;
			}

			.imgr {
				margin-left: 10px;

				img {
					width: 16px;
					height: 16px;
					margin-right: 5px;
				}

				p {
					font-size: 12px;
					color: #999;

					&:nth-child(2) {
						margin-top: 10px;
					}
				}

				p:nth-of-type(1) {
					font-weight: 400;
					font-style: normal;
					font-size: 16px;
					color: rgb(0, 0, 0);
				}

				p:nth-of-type(2) {
					span:nth-of-type(1) {
						font-weight: 400;
						font-style: normal;
						font-size: 16px;
						color: black;
						margin-right: 5px;
					}
				}
			}
		}

		.mainright {
			margin-left: 60px;
			display: flex;
			justify-content: space-between;
			flex: 1;
			align-items: center;

			.mainrightonse {
				font-size: 14px;

				.badge {
					border-radius: 50%;
					display: inline-block;
					width: 15px;
					height: 15px;
				}

				text-align: center;

				p {
					font-size: 28px;
					color: #000;
					margin-bottom: 0px;
				}
			}
		}
	}
}
</style>
